import React, { useState } from 'react'
import { NavBar, Button, Card, List, Checkbox, Modal } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {
    Form,
    Input,
    Toast
} from 'antd-mobile'
import { DeleteOutline, FillinOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import http from '../../api/http'
import { SwitchPer, delPer, addPer, editPer } from '../../store/PersonSlice'

function Index() {
    const navigate = useNavigate()
    const { PersonList } = useSelector(state => state.PersonSlice)
    const dispatch = useDispatch()

    const [form] = Form.useForm()

    // 信息录入
    const handleUpFlie = () => {
        const input = document.createElement('input')
        input.type = 'file';
        input.click();

        input.onchange = async () => {
            const file = input.files[0];
            const formdata = new FormData();
            formdata.append("file", file);
            const res = await http.post('/api/orc/upload/image', formdata);
            console.log(res.data)
            const { code, message, data } = res.data;
            if (code === 200) {
                Toast.show(message)
                form.setFieldsValue(data)
            }
        }
    }

    // 弹框
    const [visible, setVisible] = useState(false)
    const [editId, setEditId] = useState()
    const [flag, setFlag] = useState(true)
    // 添加
    const handleAdd = () => {
        // 打开弹框
        setVisible(true)
        // 为新增
        setFlag(true)
        form.resetFields('')
    }
    // 编辑
    const handleEdit = (item) => {
        // 打开弹框
        setVisible(true)
        // 为新增
        setFlag(false)
        form.setFieldsValue(item)
        setEditId(item.id)
    }
    const handleOk = (action) => {
        if (action.type === 'confirm') {
            // 新增
            if (flag) {
                // 添加
                // 
                const addObj = {
                    id: Number(Math.random().toString().slice(2, 6)),
                    state: false,
                    ...form.getFieldsValue()
                }
                dispatch(addPer(addObj))
            } else {
                // 编辑
                const editObj = {
                    id: editId,
                    ...form.getFieldsValue()
                }
                dispatch(editPer(editObj))
            }
        } else {
            // 编辑
            setVisible(false)
        }
    }

    return (
        <div>
            <NavBar onBack={() => { navigate(-1) }}>添加乘车人</NavBar>
            <div>
                <Card>
                    {/* 乘车人 */}
                    <Button block size='mini' color='primary' onClick={() => handleAdd()}>
                        添加乘车人
                    </Button>
                    {/* 乘车人 */}
                    <List>
                        {
                            PersonList.map((item, index) => (
                                <List.Item key={index}
                                    prefix={<FillinOutline onClick={() => handleEdit(item)} />}
                                    extra={<div>
                                        <DeleteOutline onClick={() => dispatch(delPer(item))} fontSize={20} style={{ marginRight: "10px" }} />
                                        <Checkbox checked={item.state} onClick={() => dispatch(SwitchPer(item))}></Checkbox>
                                    </div>}
                                    description={<div>{item.code}</div>}
                                >{item.name}</List.Item>
                            ))
                        }
                    </List>
                </Card>
            </div>
            <Modal
                visible={visible}
                content={<div>
                    {/* 表单 */}
                    <Button block size='mini' color='primary' onClick={() => handleUpFlie()}>
                        添加信息录入
                    </Button>
                    <Form
                        form={form}
                        layout='horizontal'
                    >
                        <Form.Header>{flag ? '添加乘机人' : '编辑乘机人'}</Form.Header>
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入姓名' />
                        </Form.Item>

                        <Form.Item
                            name='code'
                            label='身份证号'
                            rules={[{ required: true, message: '身份证号不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入身份证号' />
                        </Form.Item>

                    </Form>
                </div>}
                closeOnAction
                onClose={() => {
                    setVisible(false)
                }}
                onAction={(action) => handleOk(action)}
                actions={[
                    {
                        key: 'confirm',
                        text: '确定',
                    },
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                ]}
            />
        </div>
    )
}

export default Index
